<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="echarts.js"></script>
  <script src="jquery-3.7.1.min.js"></script>
</head>

<body>
  <div style="width: 800px;height:600px;border: 1px solid #f00"></div>
  
  <script>
    var airData = [
        { name: '新疆维吾尔自治区', value: 10 },
        { name: '西藏自治区', value: 5 },
        { name: '内蒙古自治区', value: 10 },
        { name: '青海省', value: 5 },
        { name: '四川省', value: 20 },
        { name: '黑龙江省', value: 5 },
        { name: '甘肃省', value: 10 },
        { name: '云南省', value: 20 },
        { name: '广西壮族自治区', value: 20 },
        { name: '湖南省', value: 20 },
        { name: '陕西省', value: 20 },
        { name: '广东省', value: 20 },
        { name: '吉林省', value: 5 },
        { name: '河北省', value: 20 },
        { name: '湖北省', value: 20 },
        { name: '贵州省', value: 20 },
        { name: '山东省', value: 20 },
        { name: '江西省', value: 20 },
        { name: '河南省', value: 20 },
        { name: '辽宁省', value: 20 },
        { name: '山西省', value: 20 },
        { name: '安徽省', value: 20 },
        { name: '福建省', value: 10 },
        { name: '浙江省', value: 20 },
        { name: '江苏省', value: 20 },
        { name: '重庆市', value: 20 },
        { name: '宁夏回族自治区', value: 5 },
        { name: '海南省', value: 10 },
        { name: '台湾省', value: 0 },
        { name: '北京市', value: 20 },
        { name: '天津市', value: 20 },
        { name: '上海市', value: 20 },
        { name: '香港特行政区', value: 0 },
        { name: '澳门特别行政区', value: 0 },
        { name: '南海诸岛', value: 0 }
    ]
    var mCharts = echarts.init(document.querySelector("div"))
    $.get('china.json', function (ret) {
      // ret 就是中国的各个省份的矢量地图数据
      console.log(ret)
      echarts.registerMap('chinaMap', ret)
      var option = {
        backgroundColor: '#F4F4F4',
        title: {
            text: '各省的数据安全行为',
            subtext: '人员配置',
            left:'center'
        },
        geo: {
          type: 'map',
          map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
          roam: true, // 设置允许缩放以及拖动的效果
          label: {
            show: true // 展示标签
          }
        },
        toolbox: {
          feature:{
            DataView:{},
          },
        },
        series: [
          {
            data: airData,
            geoIndex: 0, 
            type: 'map'
          }
        ],
        visualMap: {
          min: 0,
          max: 30,
          inRange: {
            color: [ '#FFCC66','#FF9900', '#FF9966','#CC3300','#996666'] // 控制颜色渐变的范围
          },
          calculable: true // 出现滑块
        }
      }
      mCharts.setOption(option)
    })

  </script>
</body>

</html>